<template>
	<!-- 不同平台下高度显示有问题 -->
	<button class="ac-float-button btn-raw" :class="{
		'z-tabs-item-title': true,
		'ac-float-button__disabled': props.disabled,
	}" :disabled="props.disabled"
		:style="[{ 'background-color': _color, 'line-height': props.height + 'rpx' }, _style, props._style]"
		@click.stop="_onClick($event)" @longpress="_onLongpress($event)">
		<slot></slot>
	</button>
</template>

<script setup>
import { computed, ref, watch, onBeforeMount } from 'vue';
import { pub_props, computedColor, computedMarginPadding } from '@/uni_modules/ac-ui/utils/minxs/props';

const props = defineProps({
	...pub_props,
	width: {
		type: Number,
		default: 100,
	},
	height: {
		type: Number,
		default: 100,
	},
	rounded: {
		type: Number,
		default: 60,
	},
	top: {
		type: Number,
	},
	bottom: {
		type: Number,
		default: 80,
	},
	left: {
		type: Number,
	},
	right: {
		type: Number,
		default: 32,
	},
	color: {
		type: String,
		default: 'red-500',
	},
	linear: {
		type: Boolean,
		default: false,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	_class: {
		type: String,
	},
	_style: {
		type: String,
	},
});

const _color = computed(() => computedColor(props.color));

const _style = computed(() => {
	let style = {};

	style['width'] = props.width + 'rpx';
	style['height'] = props.height + 'rpx';
	if (props.rounded) {
		style['border-radius'] = props.rounded + 'rpx';
	}

	if (props.top) {
		style['top'] = props.top + 'rpx';
	}
	if (props.bottom) {
		style['bottom'] = `calc(var(--window-bottom) + ${props.bottom}rpx)`;
	}
	if (props.right) {
		style['right'] = props.right + 'rpx';
	}
	if (props.left) {
		style['left'] = props.left + 'rpx';
	}

	return style;
});

const emits = defineEmits(['click', 'clickStop', 'longpress']);

function _onClick(event) {
	emits('click', event);
}

function _onClickStop(event) {
	emits('clickStop', event);
}

function _onLongpress(event) {
	emits('longpress'.event);
}
</script>

<style scoped>
.ac-float-button {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: fixed;
	line-height: 0rpx;
	z-index: 20;
}

.ac-float-button__disabled {
	opacity: .5;
}

.btn-raw {
	background-color: transparent;
	line-height: 0rpx;
	/* #ifndef APP-NVUE */
	padding: 0;
	margin: 0;
	/* #endif */
	/* #ifdef APP-NVUE */
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	/* #endif */
}

.btn-raw:after {
	border: none;
}
</style>
